<template>
  <div class="canvas" style="opacity: 0.9">
    <Particles id="tsparticles" class="login__particles" :options="particles" />
  </div>
  <div class="page2">
    <Header
      :title="setting.title"
      :bgColor="setting.bgColor"
      :fontColor="setting.fontColor"
      :headerBgImg="setting.headerBgImg"
    />
    <Row class="content">
      <Col span="6">
        <div class="list">
          <div class="left">
            <span class="title"><span class="title-4">过去10小时业务系统推送量</span></span>
            <span class="angle1"></span>
            <span class="angle2"></span>
            <span class="angle3"></span>
            <span class="angle4"></span>
            <div class="chart-100">
              <barChart />
            </div>
          </div>
        </div>

        <div class="list">
          <div class="left">
            <span class="title"><span class="title-4">过去10天API调用量统计</span></span>
            <span class="angle1"></span>
            <span class="angle2"></span>
            <span class="angle3"></span>
            <span class="angle4"></span>
            <div class="chart-100">
              <proportionChart />
            </div>
          </div>
        </div>

        <div class="list">
          <div class="left">
            <span class="title"><span class="title-4">过去10小时上云数量推送统计</span></span>
            <span class="angle1"></span>
            <span class="angle2"></span>
            <span class="angle3"></span>
            <span class="angle4"></span>
            <div class="chart-100">
              <strangechart />
            </div>
          </div>
        </div>
      </Col>

      <!-- 中间部分 -->
      <Col span="12">
        <div class="center_Cnt">
          <div class="toptj">
            <span class="angle1"></span>
            <span class="angle4"></span>
            <div class="tjitem">
              {{ devices.total }}
              <div class="tjline"></div>
            </div>
            <!-- <div class="tjitem">--<div class="tjline"></div></div> -->
            <div class="tjitem">{{ devices.offline_count }}<div class="tjline"></div></div>
            <!-- <div class="tjitem">--</div> -->
          </div>
          <div class="toptj">
            <div class="tjitem tjtitle">设备总数</div>
            <!-- <div class="tjitem tjtitle">关键组件总数</div> -->
            <div class="tjitem tjtitle">离线设备数</div>
            <!-- <div class="tjitem tjtitle">组件报警数</div> -->
          </div>

          <div class="card">
            <div class="cardItem" v-for="(item, index) in devices.devicesList" :key="index">
              <div class="zmc">
                <span class="angle1"> </span>
                <span class="angle2"></span>
                <div class="topimg">
                  <img v-if="item.bg_img == null" src="./com/1.jpg" alt="" />
                  <img v-else :src="item.bg_img" alt="" />
                </div>
                <div class="btm">
                  <div class="ptext" :title="item.name">{{ item.name }}</div>
                  <div class="ptext" :title="item.components">组件数：{{ item.components }}</div>
                  <div class="ptext" :title="item.data_total"
                    >实时数据量：{{ item.data_total }}</div
                  >
                </div>
              </div>
              <div class="lixian blink" v-if="item.online == 0">
                <img src="./com/image/lixian.png" alt="" />
              </div>

              <!-- <div class="mc" v-if="item.online == 0"></div> -->
            </div>
          </div>
        </div>
      </Col>

      <Col span="6">
        <div class="list">
          <div class="left">
            <span class="title"><span class="title-4">过去10小时数据采集量</span></span>
            <span class="angle1"></span>
            <span class="angle2"></span>
            <span class="angle3"></span>
            <span class="angle4"></span>
            <div class="chart-100">
              <distinguishCarts />
            </div>
          </div>
        </div>
        <div class="list">
          <div class="left">
            <span class="title"><span class="title-4">过去10天报警推送次数</span></span>
            <span class="angle1"></span>
            <span class="angle2"></span>
            <span class="angle3"></span>
            <span class="angle4"></span>
            <div class="chart-100">
              <ageportraitCharts />
            </div>
          </div>
        </div>

        <div class="list">
          <div class="left">
            <span class="title"><span class="title-4">属性数据采集率百分比</span></span>
            <span class="angle1"></span>
            <span class="angle2"></span>
            <span class="angle3"></span>
            <span class="angle4"></span>
            <div class="chart-100">
              <emotionCharts class="wid50" ref="emotionChartsRef" />
              <collectionRateCharts class="wid50 pos_right" ref="collectionRateChartsRef" />
            </div>
          </div>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
  import { defineComponent, reactive, ref, onMounted, onBeforeUnmount } from 'vue';
  import barChart from '/@/views/largeData/com/barChart.vue';
  import strangechart from '/@/views/largeData/com/strangechart.vue';
  import proportionChart from '/@/views/largeData/com/proportionChart.vue';
  import distinguishCarts from '/@/views/largeData/com/distinguishCarts.vue';
  import ageportraitCharts from '/@/views/largeData/com/ageportraitCharts.vue';
  import emotionCharts from '/@/views/largeData/com/emotionCharts.vue';
  import Header from '/@/views/largeData/com/header.vue';
  import { Row, Col } from 'ant-design-vue';
  import { getStatistics } from '/@/api/requestApi/boardApi';
  import { particles } from '/@/views/largeData/com/particles-config';
  import collectionRateCharts from '/@/views/largeData/com/collectionRateCharts.vue';
  export default defineComponent({
    components: {
      barChart,
      strangechart,
      proportionChart,
      distinguishCarts,
      ageportraitCharts,
      emotionCharts,
      collectionRateCharts,
      Header,
      Row,
      Col,
    },
    setup() {
      const spinning = ref(false);
      const loading = ref(true);
      const timer = ref('');
      const setting = reactive({
        title: '环思边缘网关',
      });

      const devices = reactive({
        devicesList: [],
        offline_count: 0,
        total: 0,
      });

      setTimeout(() => {
        loading.value = false;
      }, 1500);
      //设备统计
      async function statistics() {
        await getStatistics()
          .then((res) => {
            devices.total = res.total;
            devices.offline_count = res.offline_count;
            devices.devicesList = res.devices;
          })
          .catch((error) => {
            console.log(error);
          });
      }

      onMounted(() => {
        spinning.value = true;
        statistics();
        timer.value = setInterval(() => {
          statistics();
          emotionChartsRef.value.getdatacollectionrate();
          collectionRateChartsRef.value.getdatacollectionrate();
        }, 60000);
      });

      onBeforeUnmount(() => {
        clearInterval(timer.value);
      });
      return {
        loading,
        setting,
        devices,
        particles,
      };
    },
  });
</script>
<style scoped></style>
<style lang="less" scoped>
  /* 定义keyframe动画，命名为blink */
  @keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 1;
    }
    50.01% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  /* 添加兼容性前缀 */
  @-webkit-keyframes blink {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @-moz-keyframes blink {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @-ms-keyframes blink {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @-o-keyframes blink {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  .lixian {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 10px;
    top: 5px;
  }
  /* 定义blink类*/
  .blink {
    color: #dd4814;
    animation: blink 1s linear infinite;
    /* 其它浏览器兼容性前缀 */
    -webkit-animation: blink 1s linear infinite;
    -moz-animation: blink 1s linear infinite;
    -ms-animation: blink 1s linear infinite;
    -o-animation: blink 1s linear infinite;
    .ptext {
      color: #ff5500;
      animation: blink 1s linear infinite;
      padding-left: 10px;
      box-sizing: border-box;
      line-height: 22px;
    }
  }

  .center_Cnt {
    width: 100%;
    padding: 12px 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .card {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      height: 676px;
      overflow-y: scroll;
      align-content: baseline;
      .cardItem {
        margin-right: 1.5%;
        width: 23.875%;
        margin-bottom: 20px;
        position: relative;

        height: 170px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        position: relative;
        border: 1px solid #0d2451;
        flex-direction: column;
        padding-bottom: 5px;
        box-sizing: border-box;
        .zmc {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0px;
          left: 0px;
          z-index: 999;
        }
        .mc {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0px;
          left: 0px;
          opacity: 0.2;
          background-color: #801016;
        }
        .btm {
          color: #fff;
          font-size: 12px;
          margin-top: 10px;
          .ptext {
            margin-left: 10px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
        .topimg {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: flex-start;
          padding-top: 13px;
          box-sizing: border-box;
        }
        img {
          width: 84px;
          height: auto;
          object-fit: contain;
        }
      }
      .cardItem:nth-child(4n) {
        margin-right: 0px !important;
      }
    }
    .toptj {
      position: relative;
      display: flex;
      width: 100%;
      .tjline {
        width: 1px;
        height: 26px;
        background-color: #d9d9d9;
        opacity: 0.6;
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
      }
      .tjtitle {
        color: #fff !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        height: 52px !important;
        margin-bottom: 10px;
      }
      .tjitem {
        font-family: 'UnidreamLED';
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
        color: #fcec8b;
        height: 60px;
        font-size: 40px;
        font-weight: bold;
        position: relative;
      }
    }
  }
  .page2 {
    height: calc(100%);
    width: 100%;
    padding: 20px 20px 20px;
    background: #03044a;
    overflow: hidden;
    box-sizing: border-box;
    .content {
      height: calc(100% - 100px) !important;
      .ivu-col {
        height: 100%;
      }

      .circlePie {
        height: 100%;
        padding: 0 0 40px;
        text-align: center;
        position: relative;

        canvas {
          position: absolute;
          left: 50%;
          top: 0;
          transform: translate(-50%, 0);
        }

        #dot {
          background: rgba(0, 0, 0, 0);
        }
      }
      .title {
        position: absolute;
        display: inline-block;
        color: #6eddf1;
        background: #14418e;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 14px;
        z-index: 99;
      }
      .title .title-4 {
        display: inline-block;
        padding: 5px 11px;
        background: radial-gradient(59% 58% ellipse, rgba(7, 9, 34, 0.8) 60%, #154391);
      }

      .list {
        height: 33%;
        margin-top: 10px;
        .left,
        .right {
          background: #0d1341;
        }

        .left,
        .right,
        .center {
          width: 100%;
          height: 90%;
          border: 1px solid #0d2451;
          position: relative;

          #left1,
          #left2,
          #left3,
          #right1,
          #right2,
          #right3,
          #center2 {
            height: 100%;
          }

          .chart-100 {
            width: 100%;
            height: 80%;
            float: left;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 46px;
            position: relative;

            .pos_right {
              position: absolute;
            }
          }

          .chart-32 {
            width: 32%;
            height: 100%;
            float: left;
          }
        }
      }
    }

    .bottom-list {
      height: 35%;

      .ivu-col {
        height: 100%;

        .list {
          height: 100%;
          width: 33.3333%;
          padding-right: 1.5%;
          float: left;

          #bottom_4 {
            padding: 0 20px;
          }

          .bottom {
            width: 100%;
            height: 100%;
            border: 1px solid #0d2451;
            position: relative;
          }
        }

        .right-bottom {
          width: 100%;
          padding-right: 0;

          .bottom1 {
            width: 100%;
          }
        }
      }
    }
  }
  .angle1 {
    display: inline-block;
    position: absolute;
    width: 10px;
    height: 10px;
    top: 0;
    left: 0;
    border-top: 1px solid #1c5ab3;
    border-left: 1px solid #1c5ab3;
  }
  .angle2 {
    display: inline-block;
    position: absolute;
    width: 10px;
    height: 10px;
    top: 0;
    right: 0;
    border-top: 1px solid #1c5ab3;
    border-right: 1px solid #1c5ab3;
  }
  .angle3 {
    display: inline-block;
    position: absolute;
    width: 10px;
    height: 10px;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #1c5ab3;
    border-left: 1px solid #1c5ab3;
  }
  .angle4 {
    display: inline-block;
    position: absolute;
    width: 10px;
    height: 10px;
    bottom: 0;
    right: 0;
    border-bottom: 1px solid #1c5ab3;
    border-right: 1px solid #1c5ab3;
  }
</style>
